<template>
  <el-dialog
    :title="'查看'+data.name+'排名'"
    :visible="visible"
    width="70%"
    :destroy-on-close="false"
    :lock-scroll="false"
    @update:visible="updateVisible"
    v-loading.fullscreen.lock="fullscreenLoading">
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form
        :model="where"
        label-width="77px"
        class="ele-form-search"
        @keyup.enter.native="reload"
        @submit.native.prevent>

        <el-row :gutter="15">

      <!--  <el-col :lg="4" :md="12">
          <el-form-item label="姓名学号:">
            <el-input
              clearable
              v-model="where.username"
              placeholder="请输入姓名或学号"/>
          </el-form-item>
        </el-col> -->

       <el-col :lg="4" :md="6">
         <el-form-item label="学年:">
           <el-select
             filterable
             clearable
             v-model="where.annual"
             @change="$forceUpdate()"
             size="small"
             placeholder="-请选择学年-"
             class="ele-block">
             <el-option v-for="item in annualList" :key="item.id" :label="item.name" :value="item.id"/>
           </el-select>
         </el-form-item>
        </el-col>
        <el-col :lg="4" :md="12">
           <el-form-item label="选择年级:">
             <el-select
               filterable
               clearable
               v-model="where.gradeId"
               @change="$forceUpdate()"
               size="small"
               placeholder="-请选择年级-"
               class="ele-block">
               <el-option v-for="item in gradeList" :key="item.id" :label="item.name" :value="item.id"/>
             </el-select>
           </el-form-item>
        </el-col>
        <el-col :lg="4" :md="12">
           <el-form-item label="院系:">
             <el-select
               filterable
               clearable
               v-model="where.departmentsId"
               @change="getProfessionalList"
               size="small"
               placeholder="-请选择所属院系-"
               class="ele-block">
               <el-option v-for="item in departmentsList" :key="item.id" :label="item.name" :value="item.id"/>
             </el-select>
           </el-form-item>
        </el-col>
       <el-col :lg="4" :md="12">
           <el-form-item label="专业:">
             <el-select
               filterable
               clearable
               v-model="where.professionalId"
               @change="$forceUpdate()"
               size="small"
               placeholder="-请选择专业-"
               class="ele-block">
               <el-option v-for="item in professionalList" :key="item.id" :label="item.name" :value="item.id"/>
             </el-select>
           </el-form-item>
        </el-col>
        <el-col :lg="4" :md="12">
          <el-form-item label="性别:">
            <el-select
              clearable
              v-model="where.gender"
              placeholder="请选择性别"
              class="ele-fluid">
                            <el-option label="男" value="1"/>
                            <el-option label="女" value="2"/>
                          </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12">
          <div class="ele-form-actions">
            <el-button
              type="primary"
              icon="el-icon-search"
              class="ele-btn-icon"
              @click="reload">查询
            </el-button>
            <el-button @click="reset">重置</el-button>
           <el-button
              size="small"
              type="success"
              icon="el-icon-download"
              class="ele-btn-icon"
              @click="exportExcel">导出
            </el-button>
          </div>
        </el-col>
        </el-row>
        <el-row :gutter="15">



      </el-row>


      </el-form>

      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :where="where"
        :datasource="url"
        :columns="columns"
        :selection.sync="selection"
        height="calc(100vh - 315px)">

        <!-- 性别列 -->
        <!-- <template slot="gender" slot-scope="{row}">
          <el-tag
            :type="['success', 'primary', 'warning'][row.gender-1]"
            size="mini">
            {{ ['男', '女', '保密'][row.gender - 1] }}
          </el-tag>
        </template> -->

      </ele-pro-table>
    </el-card>

  </div>
</el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import {download} from "@/utils/download";

export default {
  //name: 'Member',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      // 表格数据接口
      url: '/sport/rankRecord?type=3',
      // 表格列配置
      columns: [
        {
          prop: 'rank',
          label: '排名',
          width: 60,
          align: 'center',
          showOverflowTooltip: true,
          fixed: "left"
        },
        {
          prop: 'realname',
          label: '姓名',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
        },
        {
          prop: 'roll',
          label: '学籍号',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
        },

        {
          prop: 'grade',
          label: '年级',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
        },
        {
          prop: 'school',
          label: '学院名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'professionalName',
          label: '专业',
          sortable: 'custom',
          align: 'center',
          width: 150,
          resizable: false,
        },
        {
          prop: 'clazz',
          label: '班级',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 60,
        },

        {
          prop: 'score',
          label: '成绩',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
        },

        {
          prop: 'bmi',
          label: 'BMI',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
        },
        {
          prop: 'pingscore',
          label: '评分',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
        },
        {
          prop: 'ratingStr',
          label: '评定',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center',
        },
      ],
      // 表格搜索条件
      where: {},
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      // 是否显示导入弹窗
      showImport: false,

      projectList: [],
      gradeList: [],
      departmentsList: [],
      professionalList: [],
      viewVideo:false,
      videoUrl:'',
      showvid:false,
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.where.taskId = this.data.id;
      }
    }
  },
  mounted() {
    this.getGradeList();
  },
  methods: {

        SeeVideo(row){
          var that = row;
          that.videoshow = true;
          this.$refs.vueRef.play();//播放
        },
        closevideo(row){
          var that = row;
          that.videoshow = false;
        },

        // 取消预览
        handleCancel(e) {
          this.viewVideo = false;
          this.$refs.vueRef.pause();//暂停
        },
        /* 导出数据Excel */
        exportExcel() {
          download('/sport/rankexportExcel2', this.where)
          // let info = Object.assign({},this.where);
          // console.log(info)
          // const loading = this.$loading({lock: true});
          // this.$http
          //   .post("/sport/rankexportExcel2", info)
          //   .then((res) => {
          //     loading.close();
          //     let data = res.data;
          //     if (data.code == 0) {
          //       // 下载文件
          //       window.location.href = data.data;
          //       this.$message({
          //         type: "success",
          //         message: "导出成功",
          //       });
          //     } else {
          //       this.$message.error("导出失败");
          //     }
          //   })
        },

    getGradeList() {
      this.$http.get("/grade/getGradeList").then(response => {
        if (response.data.code === 0) {
          this.gradeList = response.data.data
        } else {
          this.$message.error(response.data.msg);
        }
      })

      this.$http.get('/professional/getProfessionalsList').then(res => {
        if (res.data.code === 0) {
          this.professionalList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      })

      this.$http.get('/departments/getDepartmentsList').then(res => {
        if (res.data.code === 0) {
          this.departmentsList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      })

     this.$http.get('/annual/index?limit=99999').then(res => {
       if (res.data.code === 0) {
         this.annualList = res.data.data;
       } else {
         this.$message.error(res.data.msg);
       }
     })


      this.reload()
    },
    /**
     * 获取专业列表
     */
    getProfessionalList() {
      if(this.where.departmentsId){
        // this.form.professional = null;
        this.$forceUpdate();
      }
      this.$http.post('/professional/getProfessionalList',{sid:this.where.departmentsId}).then(res => {
        if (res.data.code === 0) {
          this.professionalList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({where: this.where});
    },
    /* 重置搜索 */
    reset() {
      this.where = {taskId:this.data.id};
      this.reload();
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
}
</script>

<style scoped>
</style>

<style>

  span.el-link--inner {
      background: #A4ADB3;
      color: white;
      font-size: 12px;
      padding: 2px 4px;
      border-radius: 5px;
  }
  .videoshow {
      position: fixed;
      left: 20%;
      top: 20%;
      width: 850px;
      background: #f3f2f2;
  }
  video{
    padding:10px 5px 5px;
    padding-top: 30px;
    width:800px;
  }
  .videoclose{
      position: absolute;
      float: right;
      border-radius: 37px;
      display: block;
      margin-left: 780px;
      margin-top: 3px;
      background: #e6dddd;
      padding: 2px 4px;
  }
  </style>
